<template>
  <div class="bg-white p-6 rounded-lg shadow">
    <h2 class="text-lg font-semibold mb-4">输入查询</h2>
    <el-form @submit.prevent="handleSubmit">
      <el-form-item>
        <el-input
          v-model="query"
          type="textarea"
          :rows="4"
          :disabled="loading"
          placeholder="请输入自然语言描述，例如：查询所有用户的姓名和年龄"
        />
      </el-form-item>
      <el-form-item>
        <el-button 
          type="primary" 
          @click="handleSubmit" 
          :loading="loading"
          :disabled="!query.trim()"
        >
          {{ loading ? '查询中...' : '自然语言转SQL查询' }}
        </el-button>
        <el-button 
          type="info" 
          @click="handleShowSchema"
        >
        数据库结构查询
        </el-button>
        <el-button @click="handleClear" :disabled="loading">清空</el-button>
      </el-form-item>
    </el-form>
    <SchemaTable ref="schemaTableRef" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import SchemaTable from './SchemaTable.vue'

const query = ref('')
const loading = ref(false)
const schemaTableRef = ref(null)

const emit = defineEmits(['query-submitted'])

const handleSubmit = async () => {
  if (!query.value.trim() || loading.value) {
    return
  }
  loading.value = true
  try {
    await emit('query-submitted', query.value)
  } finally {
    loading.value = false
  }
}

const handleClear = () => {
  if (loading.value) return
  query.value = ''
}

const handleShowSchema = () => {
  schemaTableRef.value?.show()
}
</script> 